<template>
	<view class="u-page">
		<view class="couponlist">
			<view class="coupon-item" v-for="(item,index) in list" :key="index">
				<view class="coupon-money">
					<view class="tit">{{item.coupon.title}}</view>
					<view class="tit">{{item.expire_time}} 前使用</view>
					<view class="tit">券号：{{item.code}}</view>
					<view class="layof" v-if="item.coupon.type=='full_minus'">
						<block v-for="(minus,key) in item.coupon.full_minus" :key="key">
							<text>满{{key}}减{{minus}}</text>
						</block>		
					</view>
					<view class="layof" v-if="item.coupon.type=='card'">
						￥{{item.balance}}	
					</view>
					<view class="layof" v-if="item.coupon.type=='cash'">
						{{item.coupon.cash}}	
					</view>
					<view class="layof" v-if="item.coupon.type=='discount'">
						{{item.coupon.discount}}折
					</view>
					<view class="layof" v-if="item.coupon.type=='goods'">
						共{{item.total}}{{item.unit}}，剩{{item.total-item.take}}{{item.unit}}
					</view>
				</view>
				<view class="get-btn" @click="useCoupon(item)" v-if="item.status==0">立即使用</view>
				<view class="img" v-if="item.status==1">
					<image src="../../static/hexiao.png"></image>
				</view>
				<view class="img" v-if="item.status==-1">
					<image src="../../static/guoqi.png"></image>
				</view>
				<view class="xianzhi" v-if="item.status==-2">
					<image src="../../static/xianzhi.png"></image>
					<text>{{item.coupon.use_limit_week | paresEk}}</text>
				</view>
				<view class="xianzhi" v-if="item.status==-3">
					<image src="../../static/xianzhi.png"></image>
					<text>{{item.coupon.use_limit_date | paresDt}}</text>
				</view>
			</view>
			<view v-if="list.length==0">
				<u-empty text="没有优惠券!" mode="search" marginTop="150"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {baseUrl,methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				customer:'',
				list: [],
				page: 1,
				enddata: false,
				detail:''
			}
		},
		onLoad(options) {
			this.customer=this.$customer();
			if(!this.customer){
				this.$reLaunch('index/index');
				return;
			}
			this.datalist();
		},
		onReachBottom() {
			this.datalist();
		},
		onPullDownRefresh: function() {
			this.list = [];
			this.page = 1;
			this.enddata = false;
			this.datalist(true);
		},
		filters:{
			paresEk:function(data){
				  let lweek=data.split(',');
				  let week=['日','一','二','三','四','五','六'];
				  let str='限周';
				  for(let i=0;i<lweek.length;i++){
					  str+=week[lweek[i]];
					  if(i<lweek.length-1){
						  str+=',';
					  }
				  }
				  return str+'使用';
			},
			paresDt:function(data){
				return '限'+data.substr(0,10)+'到'+data.substr(13,10)+'使用';
			}
		},
		methods: {
			...methods,
			useCoupon:function(detail){
				if(detail.coupon.title=='加油券'){
					this.$msg('功能开发中..');
					return;
				}
				let goods_id=detail.coupon.goods_id;
				if(goods_id.indexOf(",")!=-1){
					goods_id=goods_id.split(',')[0];
				}
				this.$redirectTo('buy/index?goods_id='+goods_id);
			},
			datalist: function(pulldown = false) {
				if (this.enddata) {
					this.msg('已经到底了');
					return;
				}	
				this.$get("shop/coupon", {
					customer_id:this.customer.id,
					page: this.page
				}, true).then(res => {
					if (pulldown) {
						uni.stopPullDownRefresh();
					}
					if (res.length < 10) {
						this.enddata = true;
					}
					res=res.map(t=>{
						if(t.coupon.type=='full_minus'){
							t.coupon.full_minus=JSON.parse(t.coupon.full_minus);
						}
						if(t.coupon.description){
							t.coupon.description=t.coupon.description.replaceAll('\r\n','<br>');
						}
						return t;
					});
					this.list = this.list.concat(res);
					this.page++;
				});
			}
		}
	}
</script>

<style lang="scss">
	.couponlist{
		width: 100%;
	}
	.coupon-item {
		width: 90%;
		height: auto;
		margin:0 auto;
		display: table;
		border-radius: 10upx;
		padding: 0 20upx;
		margin-top: 22upx;
		border: 1px solid #eeeeee;
		position: relative;
		.coupon-money {
			width: 465upx;
			height: auto;
			display: table;
			float: left;
			padding: 26upx 0;
			border-style: none dotted none none;
			border-color: #eeeeee;
			.tit {
				width: 100%;
				height: 50upx;
				line-height: 50upx;
				font-size: 28upx;
				color: #999;
			}
			.layof {
				width: 100%;
				font-size: 36upx;
				color: #ff9000;
				font-weight: bold;
				text{
					margin-right: 20upx;
				}	
			}
		}
		.img{
			position: relative;
			image{
				width: 266rpx;
				height: 200rpx;
				position: absolute;
				right: 0rpx;
				top:20rpx;
			}
		}
		.xianzhi{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 34rpx;
			padding-left: 20rpx;
			image{
				width: 130rpx;
				height: 130rpx;
			}
			text{
				font-size: 24rpx;
			}
		}
		.get-btn {
			width: 146upx;
			height: 52upx;
			line-height: 50upx;
			position: absolute;
			top: 50%;
			right: 26upx;
			margin-top: -26upx;
			text-align: center;
			border-radius: 60upx;
			color: #ff9000;
			border: 1px solid #ff9000;
			font-size: 28upx;
			float: right;
		}
	}

	.coupon-item:after {
		width: 40upx;
		height: 20upx;
		position: absolute;
		left: 460upx;
		top: -1px;
		border-radius: 0 0 40upx 40upx;
		content: "";
		display: block;
		background: #fff;
		border: 1px solid #eeeeee;
		border-top: 0px;
	}

	.coupon-item:before {
		width: 40upx;
		height: 20upx;
		position: absolute;
		left: 460upx;
		bottom: -1px;
		border-radius: 40upx 40upx 0 0;
		content: "";
		display: block;
		background: #fff;
		border: 1px solid #eeeeee;
		border-bottom: 0px;
	}
</style>
